<template>
	<div>
		<div id="container"></div>
		<div id="three"></div>
		<div id="popup"></div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, type Ref, nextTick } from 'vue'
import * as THREE from 'three'
// import Viewer, { type Animate } from './modules/Viewer'
import {
	Scene, //场景对象
	PerspectiveCamera, //透视投影相机
	AxesHelper, //辅助线
	WebGLRenderer, //渲染器
	Camera, //相机类
	SRGBColorSpace, //色彩空间
	AmbientLight, //环境光
	Raycaster, //射线拾取模型 鼠标点击选中模型
	Vector2 //二维向量对象OrbitControls
} from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js'
import TWEEN from '@tweenjs/tween.js'
// const leftImg = computed(() => new URL(`./assets/logo/words.png`, import.meta.url).href);
// let viewer: Viewer
let objects = [] //存放转化为3D的照片对象
let spheres = [] //用来存放目标对象的位置
//坐标初始化
const scene = new Scene()
// 镜头
const camera = new PerspectiveCamera(40, 1920 / 1080, 1, 10000)
camera.position.z = 3400
const vector = new THREE.Vector3() //三维坐标
const spherical = new THREE.Spherical() //球坐标
const renderer = new CSS3DRenderer()
const controls = new OrbitControls(camera, renderer.domElement)
controls.autoRotate = true //为true时，相机自动围绕目标旋转,但必须在animation循环中调用update()
renderer.setSize(window.innerWidth, window.innerHeight)
window.addEventListener('mousedown', clickMouse);
onMounted(() => {
	document.getElementById('container').appendChild(renderer.domElement)
	scene.traverse((item: THREE.Object3D) => {
		// console.log(item, '0000000000')
	})
	init()
  animate()
})
async function init() {
	//放图片
	await nextTick()
	for (var i = 1; i < 20; i++) {
		//125为照片的个数，随便放多少，不过要适中
		let element = document.createElement('div')
		console.log(element)

		element.className = 'element' //给图片加类名即设置对应的图片大小
		element.style.width = '160px'
    element.style.height = '120px'
    element.style.fontSize='120px'
		element.style.background = ' #123ca8'
		element.innerHTML = '城市' // 背景图片 图片名称是 1...118.jpg
		element.style.backgroundSize = 'cover' //保持图像的宽高比例，将图片缩放到正好完全覆盖定义的背景区域
		element.name = i // 给元素的name属性赋值，以便获取鼠标点击的当前值
		let object = new CSS3DObject(element) //可以将HTML元素作为纹理添加到3D对象中，从而创建有趣的3D特效
		scene.add(object)
		objects.push(object) //为了知道被添加到照片元素的个数
	}
	let l = objects.length
	// 根据球形排列公式计算每个元素的位置
	for (var i = 0; i <= l; i++) {
		console.log(i)
		//该部分为固定的数学公式
		let phi = Math.acos(-1 + (2 * i) / l)
		let theta = Math.sqrt(l * Math.PI) * phi
		// 计算元素在球面上的坐标
		let x = 800 * Math.cos(theta) * Math.sin(phi) //800代表球的半径
		let y = 800 * Math.sin(theta) * Math.sin(phi)
		let z = 800 * Math.cos(phi)

		let object = new THREE.Object3D()
		object.position.set(x, y, z) //设置对象的位置

		vector.copy(object.position).multiplyScalar(2) //将该向量与所传入的标量2进行相乘。
		object.lookAt(vector) //vector这个变量的作用，它用来作为'目标位置'，使用这个方法让这个位置的对象object看向vector这一点所在的方向
		spheres.push(object)
	}
	transform(spheres, 2000) //动画转换
}
function transform(spheres, duration) {
	for (var i = 0; i < objects.length; i++) {
		let object = objects[i]
		let target = spheres[i]
		new TWEEN.Tween(object.position) //过渡图片移动的位置
			.to(
				{ x: target.position.x, y: target.position.y, z: target.position.z },
				Math.random() * duration + duration
			) //改变当前模型的位置
			.easing(TWEEN.Easing.Exponential.InOut) //运动曲线
			.start() //开启动画

		new TWEEN.Tween(object.rotation) //过渡图片旋转
			.to(
				{ x: target.rotation.x, y: target.rotation.y, z: target.rotation.z },
				Math.random() * duration + duration
			)
			.easing(TWEEN.Easing.Exponential.InOut)
			.start()
	}
}
function animate() {
	TWEEN.update()
	controls.update()
	renderer.render(scene, camera)
	requestAnimationFrame(animate)
}
function clickMouse(e) {
  console.log(1212);
  
	if (!e) {
		let e = window.event
	}
	let tname = e.target.name //获取点击图片的名称
	if (typeof tname == 'undefined' || tname == '') {
		//鼠标点击的不是照片
		let div = document.getElementById('popup')
		div.style.display = 'none' //隐藏元素
	} else {
		Popup(tname)
	}

	// 放大的图片
	function Popup(tname) {
		let w = window.innerWidth
		let h = window.innerHeight
		let div = document.getElementById('popup')
		div.style.display = 'block' //显示元素
		div.style.background="red"
		div.style.backgroundSize = 'cover'
		div.style.height = h * 0.7 + 'px'
		div.style.width = h * 0.6 + 'px'
		div.style.position = 'absolute'
		div.style.left = '0px'
		div.style.right = '0px'
		div.style.top = '0px'
		div.style.bottom = '0px'
		div.style.margin = 'auto' //居中位置
		div.style.borderRadius = '5px' // 圆角
	}
}
</script>

<style lang="scss" scoped>
#three {
	height: 800px;
	width: 100%;
}
.element {
	width: 120px;
	height: 160px;
	box-shadow: 0px 0px 12px #123ca8;
	border: 1px solid #123ca8;
	text-align: center;
	cursor: default;
}

.element:hover {
	//鼠标悬浮在照片上的样式
	box-shadow: 0px 0px 12px #123ca8;
	border: 1px solid #123ca8;
}
</style>
